// 打包css
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'js/built.js', // 输出的文件名
    path: path.resolve(__dirname, 'build'), // 输出的路径
  },
  // 开发服务器
  // 只在内存中编译打包  不会有任何输出
  // webpack-dev-server
  devServer: {
    // 运行项目的目录
    contentBase: path.resolve(__dirname, 'build'),
    // 确定GZIP 压缩
    compress: true,
    port: 3000,
    // 自动打开浏览器
    open: true
  },
  // loader配置
  module: {
    rules: [
      {
        // 匹配哪些文件
        test: /\.css$/,
        // 使用哪些loader进行处理
        use: [
          // style 将js中的样式  变成style标签插入到 head中
          'style-loader',
          // 将css文件变成commonjs模块加入到js中  里面内容是样式字符串
          'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          // 将less 转为css  
          // 需要要下载 less-loader less
          'less-loader'
        ]
      },
      {
        // 需要下载 url-loader file-loader
        // 默认处理不了html中的图片
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          // 小于8K就会被base64处理
          limit: 8*64, 
          esModule: false,
          name: '[hash:10].[ext]',
          outputPath: 'imgs'
        }
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        loader: 'file-loader',
        options: {
          outputPath: 'font'
        }
      },
      {
        test: /\.html$/,
        // 处理html img图片  负责引入图片
        loader: 'html-loader'
      },
      {
        // 其他资源  排除其他资源
        // exclude: /\.(css|js|html)$/
      }
    ]
  },
  // 插件配置
  plugins: [
    // html-webpack-plugin 打包html
    // 需要自己的结构
    new HtmlWebpackPlugin({
      // 把这个作为模板  自动引入打包输出的所有资源
      template: './src/index.html'
    })
  ],
  mode: 'development',
  // mode: 'production'
}